
<template>
  <h1>vue3一个人的信息</h1>
  <h1>姓名：{{name}}</h1>
  <h1>年龄：{{age}}</h1>
  <br>
  <h1>工作种类：{{job.type}}</h1>
  <h1>工作薪水：{{job.salary}}</h1>
  <h1>爱好：{{hobby}}</h1>
  <button @click="changeInfo">修改个人信息</button>

</template>
<script>
import {ref,reactive} from 'vue'
export default {
  /**
   * reactive
   *
   *
   */
  name: 'demo1',
  // // 测试 ，暂时不考虑响应式
  setup(){
    //基础类型不要使用 reactive
    let name = ref('张三')
    let age = ref(18)
    // 多层也可用
    let job = reactive({
      type:'前端工程师',
      salary:'30k'
    })
    // 数组类型
    let hobby = reactive ([`抽烟`,`喝酒`,`烫头`])

    /**
     * 使用reactive结果
     *
     */
    function changeInfo(){
      console.log(job)
      job.type=`UI设计师`
      // vue3 由于使用了 proxy 可以直接改 vue2不可以
      hobby[0] = `学习`
    }
    return{
      name,
      age,
      job,
      hobby,
      changeInfo
    }
  },

}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
